<!-- 模块说明 -->
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 120px;
}

.footerBtn {
  display: flex;
  justify-content: space-evenly;

  .btn {
    flex: 1;
  }
}

.quickSearch {
  display: flex;
  justify-content: space-around;
}
</style>

<template>
  <div>
    <FloatWindow type="left">
      <div class="__cards__" style="margin-bottom: 10px;">
        <div class="quickSearch">
          <el-radio-group v-model="quickSearch" size="small" @change="onRadioChange">
            <el-radio-button value="toDay">今天</el-radio-button>
            <el-radio-button value="lastDay">昨天</el-radio-button>
            <el-radio-button value="toWeek">本周</el-radio-button>
            <el-radio-button value="toMonth">本月</el-radio-button>
            <el-radio-button value="all">全部</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="__cards__">
        <main class="main">
          <el-input placeholder="请输入姓名" v-model="searchParams.name" size="small" />
          <el-input placeholder="请输入手机号" v-model.number="searchParams.phone" size="small" />
          <div>
            <el-date-picker type="daterange" style="width:calc(100% - 20px)" start-placeholder="登记开始日期"
              end-placeholder="登记结束日期" size="small" v-model="searchParams.createTime" />
          </div>
        </main>
        <footer class="footerBtn">
          <el-button style=" margin: 10px 0" type="primary" class="btn" size="small" @click="search">
            搜索
          </el-button>
          &nbsp;&nbsp;
          <el-button style=" margin: 10px 0" class="btn" @click="reset" size="small">
            重置
          </el-button>
        </footer>

      </div>
    </FloatWindow>

    <TableSimple :columns="columns" :data="listData"
      :pagination="{ ...pagination, localPage: false, onChange: onChangeSize }" />

  </div>
</template>

<script setup>
import TableSimple from '@/components/Tables/TableSimple.vue'
import { getUserInfoList } from "@/api/dataManagement"
import { onMounted, ref, reactive, watch } from 'vue'
import dayjs from "dayjs"
const listData = ref([])
const pagination = ref({})
const quickSearch = ref('all')
const initPagination = { current: 1, size: 20 }
const searchParams = reactive({
  createTime: '',
  name: '',
  phone: ''
})
const reset = () => {
  searchParams.name = ''
  searchParams.phone = ''
  searchParams.createTime = ''
  quickSearch.value = 'all'
  getList(initPagination)
}

const search = () => {
  quickSearch.value = 'all'
  getList({ ...initPagination, ...searchParams })
}
const getList = async (params) => {
  const res = await getUserInfoList({ ...params })
  if (res.code === 200) {
    listData.value = res.data.data
    pagination.value = res.data.pagination
  }
}

const onRadioChange = (v) => {
  searchParams.name = ''
  searchParams.phone = ''
  searchParams.createTime = ''
  getList({ ...initPagination, createTime: v })
}
const onChangeSize = (v) => {
  const { pageNum, pageSize } = v
  getList({ current: pageNum, size: pageSize })
}

onMounted(() => {
  getList(initPagination)
})

/**
 * 判断是否
*/
const isYesOrNo = (status) => {
  if (!status) return ""
  if (status === "1") {
    return "是"
  } else {
    return "否"
  }
}
const columns = [
  {
    title: '序号',
    type: 'index',
    width: '60'
  },
  {
    title: '姓名',
    dataIndex: 'name'
  },
  {
    title: '出生年月',
    dataIndex: 'dateOfBirth',
    width: 120,
  },
  {
    title: '年龄',
    dataIndex: 'dateOfBirth',
    render: [
      {
        isName: 'span',
        text: (row) => {
          if (!row.dateOfBirth) return ""
          const formatDate = (str) => str.replace(/\s*年\s*(\d{2})\s*月\s*/, '-$1');
          const age = dayjs().diff(dayjs(formatDate(row?.dateOfBirth)), 'year')
          return age
        }
      }
    ]
  },
  {
    title: '身高(CM)',
    dataIndex: 'height',
    width: 100,
  },
  {
    title: '体重(KG)',
    dataIndex: 'weight',
    width: 100,
  },
  {
    title: '民族',
    dataIndex: 'nationality',
    width: 150,
  },
  {
    title: '手机号',
    dataIndex: 'phoneNumber',
    width: 150,
  },
  {
    title: '是否专科及以上',
    width: 150,
    dataIndex: 'academicQualification',
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.academicQualification)
        }
      }
    ]
  },
  {
    title: '是否发际线高或者秃顶',
    width: 180,
    dataIndex: 'tuDing',
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.tuDing)
        }
      }
    ]
  },
  {
    title: '是否色盲色弱',
    width: 120,
    dataIndex: 'seMange',
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.seMange)
        }
      }
    ]
  },
  {
    title: '是否有纹身',
    dataIndex: 'wenShen',
    width: 100,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.wenShen)
        }
      }
    ]
  },
  {
    title: '是否有心理问题',
    dataIndex: 'xinLi',
    width: 130,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.xinLi)
        }
      }
    ]
  },
  {
    title: '是否有传染病',
    dataIndex: 'chuanRan',
    width: 130,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.chuanRan)
        }
      }
    ]
  },
  {
    title: '传染病备注',
    dataIndex: 'chuanRanText',
    width: 130,
  },
  {
    title: '是否有遗传疾病',
    dataIndex: 'yiChuan',
    width: 130,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.yiChuan)
        }
      }
    ]
  },
  {
    title: '遗传疾病备注',
    dataIndex: 'yiChuanText',
    width: 130,
  },
  {
    title: '是否近视',
    dataIndex: 'jinShi',
    width: 100,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.jinShi)
        }
      }
    ]
  },
  {
    title: '近视度数',
    dataIndex: 'jinShiText',
    width: 100,
  },
  {
    title: '是否有同性恋历史',
    dataIndex: 'tongXingLian',
    width: 150,
  },
  {
    title: '未来一年在上海吗',
    dataIndex: 'isShangHai',
    width: 150,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.isShangHai)
        }
      }
    ]
  },
  {
    title: '是否在其他精子库登记',
    dataIndex: 'dengJi',
    width: 200,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return isYesOrNo(row.dengJi)
        }
      }
    ]
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 140,
    render: [
      {
        isName: 'span',
        text: (row) => {
          return dayjs(row?.createTime).format('YYYY-MM-DD hh:mm:ss')
        }
      }
    ]
  },
  // {
  //   title: '操作',
  //   render: [
  //     {
  //       isName: 'el-button',
  //       type: 'text',
  //       text: '修改',
  //       click(row) {
  //         console.log(row, 'row')
  //       }
  //     },
  //   ]
  // }
]
</script>